<template>
  <div class="parent">
  </div>
  <div class="childing">
    <div class="child" draggable="true" id="one">1</div>
    <div class="child" draggable="true" id="tow">2</div>
    <div class="child" draggable="true" id="tree">3</div>
    <div class="child" draggable="true" id="four">4</div>
  </div>
  <table class="table">
    <thead>
      <tr>
        <td :colspan="seeTableRow.length">分类</td>
        <td>数量</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td :rowspan="item.firstRow+1" v-if="item.firstRow+1 > 0">{{ item.nameText }}</td>
        <td v-else>{{ item.peopleText }}</td>
        <td>33</td>
        <td>{{ item.num }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { defineComponent, onMounted } from 'vue'

export default defineComponent({
  setup() {
    onMounted(() => {
      let parent = document.querySelector('.parent')
      let childs = document.querySelectorAll('.child')
      childs = Array.from(childs);
      console.log(childs, parent)
      childs.forEach(item => {
        // 开始拖放
        item.ondragstart = (e) => {
          e.dataTransfer.setData('id', item.id)
        }
        // 正在拖放
        item.ondrag = () => {
          console.log('正在拖放')
        }
        // 拖放结束
        item.ondragend = () => {
          console.log('拖放结束')
        }
      });
      parent.ondragenter = (e) => {
        console.log('目标进入容器', e)
      }
      // 进入目标元素
      parent.ondragover = (e) => {
        console.log('进入目标元素')
        e.preventDefault();
      }
      parent.ondragleave = (e) => {
        console.log('拖目标离开容器', e)
      }
      // 拖放元素放置在目标元素内
      parent.ondrop = (e) => {
        console.log('目标元素内移动')
        let id = e.dataTransfer.getData('id');
        let dom = document.querySelector('#' + id);
        parent.appendChild(dom);
        e.stopPropagation();
      }
      document.body.ondragover = (e) => {
        e.preventDefault();
      }
      document.body.ondrop = (e) => {
        let id = e.dataTransfer.getData('id');
        let dom = document.querySelector('#' + id);
        document.body.appendChild(dom) 
      }
    })
      let tableData = [
        {
          nameText: '小孩',
          peopleText: '五年请1',
          num: '1'
        },
        {
          nameText: '小孩2',
          peopleText: '五年请2',
          num: '12'
        },
        {
          nameText: '小孩2',
          peopleText: '五年请3',
          threeText: '你好',
          num: '13'
        },
        {
          nameText: '小孩44',
          peopleText: '五年请4',
          threeText: '你好',
          num: '13'
        },
        {
          nameText: '小孩44',
          peopleText: '五年请5',
          threeText: '你好',
          num: '13'
        },
        {
          nameText: '小孩44',
          peopleText: '五年请6',
          threeText: '你好',
          num: '13'
        },
        {
          nameText: '小孩55',
          peopleText: '五年请7',
          threeText: '你好',
          num: '13'
        },
        {
          nameText: '小孩55',
          peopleText: '五年请8',
          threeText: '你好',
          num: '13'
        },
      ];
      let seeTableRow = [];
      let flag = '';
      let sum = 0;
      let item = {}
      for (let index = 0; index < tableData.length; index++) {
        const element = tableData[index];
        if (flag == element.nameText) {
          sum++
          element.nameText = ''
        } else {
          console.log(element, sum, 999)
          item = element
          sum = 0
          flag = element.nameText
        }
        item.firstRow = sum
      }
      tableData.forEach(item => {
        if(item.nameText) {
          !seeTableRow.includes('1') && seeTableRow.push('1')
        }
        if (item.peopleText) {
          !seeTableRow.includes('2') && seeTableRow.push('2')
        }
        if (item.threeText) {
          !seeTableRow.includes('3') && seeTableRow.push('3')
        }
      })
      console.log(seeTableRow, tableData)
      return {
        seeTableRow,
        tableData
      }
  },
})
</script>


<style lang="scss" scoped>
.parent{
  height: 200px;
  border: 1px solid cyan;
  margin: 0 auto;
  cursor: pointer;
}
.childing{
  overflow: hidden;
  cursor: pointer;
}
.child{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  float: left;
  margin: 10px;
}
.table{
  width: 80%;
  td{
    text-align: center;
    border: 1px solid #f00;
  }
}
</style>
